<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/2.3.4/theme-chalk/index.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/theme-chalk/index.css" />

    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/element-ui/2.3.4/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.js"></script>
</head>

<body>

<div id="app">
    <avue-crud :data="data" :option="option" v-model="obj"  @row-save="handleSave"
               @row-del="handleDelete" >

    </avue-crud>
</div>
</body>
<script>
    var baseUrl = 'http://localhost:8088'
    var app = new Vue({
        el: '#app',
        data() {
            return {
                obj:{},
                data: [] ,
                option:{
                    page:false,
                    align:'center',
                    menuAlign:'center',
                    column:[
                        {
                            label:'id',
                            prop:'id'
                        },
                        {
                            label:'姓名',
                            prop:'name'
                        }
                    ]
                }
            }
        },
        created () {
            //初始化数据格式
            this.handleList();
        },
        methods: {
            handleDelete(row, done){
              axios.delete(baseUrl + '/user/' + row.id).then(res => {
                  this.$message({
                  showClose: true,
                  message: "删除成功",
                  type: "success"
              });
                // done();
                this.handleList()
              })
            },
            handleSave(row, done) {
                axios.post(baseUrl + '/user', row).then(res => {
                    this.$message({
                        showClose: true,
                        message: "添加成功",
                        type: "success"
                    });
                    done();
                    this.handleList()
                })
            },
            handleList() {
                axios.get(baseUrl + '/user')
                    .then(res => {
                        app.data = res.data
                })
            }
        }
    })
</script>
</html>